<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>房间新增</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>

<style type="text/css">
.roomNum input {
	width: 60px;
}

.roomNum th {
	background: #d70b16;
	color: #fff;
}
.roomNum,div>form{
	margin-bottom:0;
}
.roomNum{
	border-top-width: 0;
}
input{
	text-align: center;
}
</style>
</head>
<body>
	<div style="margin:20px 0px;">
		<c:forEach items="${requestScope.ris }" var="ri" varStatus="status" >
			<form action="roomInfo/editRoomInfo" class="roomForm" method="post" >
				<input type="hidden" name="roomid" value="${ri.id }" />
				<table class="table table-bordered roomNum">
					<!-- 只有第一个表格显示表头 -->
					<c:if test="${pageScope.status.index==0 }">
						<thead>
							<tr>
								<th>房间号</th>
								<th>建筑面积</th>
								<th>套内建面</th>
								<th>户型</th>
								<th>朝向</th>
								<th>用途</th>
								<th>状态</th>
								<th class="buttons">操作</th>
							</tr>
						</thead>
					</c:if>
						<tbody style="background:#eee">
							<tr>
							<td style="width: 80px;text-align:right;" >
								<input name="roomNum" value="${ri.roomNum }" />
							 	<span id="roomNo_msg" style="color:red"></span></td>
								
							<td><input name="buildingArea"
								value="<fmt:formatNumber value="${ri.buildingArea }" pattern="#0.00"/>" /> ㎡</td>
								
							<td><input name="setInArea"
								value="<fmt:formatNumber value="${ri.setInArea }" pattern="#0.00"/>" /> ㎡</td>
							
							<td><input name="houseType" style="width:90px"
								value="${ri.houseType }" /></td>
							
							<td><select class="js-example-placeholder-single"
								name="direction" style="width:70px;">
									<c:forEach items="${ directionList}" var="direct">
										<c:if test="${not empty direct}">
											<option <c:if test="${ri.direction==direct }">selected="selected"</c:if> value="${direct }">
												${direct }
											</option>
										</c:if>
									</c:forEach>
							</select></td>
							
							<td><select class="js-example-single" name="roomUse" style="width:80px;">
									<option value="办公">办公</option>
									<option value="商业">商业</option>
									<option value="居住">居住</option>
								</select>
								<input type="hidden" value="${ri.roomUse }" >
							</td>
							
							<td><select class="js-example-single <c:if test="${pageScope.ri.merge!=1 }">disabled</c:if>" name="roomStatus" style="width:80px;">
									<option value="空置">空置</option>
									<option value="待出租">待出租</option>
									<option value="自用">自用</option>
									<option value="出租">出租</option>
								</select>
								<input type="hidden" id="roomStatusValue" value="${ri.roomStatus }" >
							</td>
							
							<td class="buttons">
								<!-- <button class="btn btn-danger radius my-btn hidbtn"
									onclick="saveRoomInfo(3)" type="button">启用编辑</button> -->
								<button class="btn btn-danger radius my-btn" type="submit">修改</button>
								<!-- <a class="btn btn-default radius" onClick="resetForms(this);"> 重置 </a> -->
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</c:forEach>
	</div>
		
	<input type="hidden" name="fkBuildingUnit" id="fkBuildingUnit" value=""> 
		
	<script type="text/javascript">
		$(function(){
			//朝向select2
			$("select[name='direction']").select2({
				tags : true
			});
			//用途s2
			$("select[name='roomUse']").each(function(i,v){
				var t=$(v);
				t.select2();
				t.val(t.nextAll("input").val()).trigger("change");
			});
			//状态s2
			var tt=$("#roomStatusValue").val();
			$("select[name='roomStatus']").each(function(i,v){
				var t=$(v);
				t.select2();
				t.val(tt).trigger("change");
			});
			
			//初始化表单
			initForm();
		});
		
		//初始化表单提交事件
		function initForm(){
			var $form = $(".roomForm");
			$.each($form,function(i,v){
				mySubmit($(v), init, success);
			});
		}
		//封装提交数据,$_this代表当前表单from
		function init($_this){
			var roomid=$_this.find("input[name='roomid']").val();//房间id
			var roomNum=$_this.find("input[name='roomNum']").val();//房间号
			var buildingArea=$_this.find("input[name='buildingArea']").val();//建筑面积
			var setInArea=$_this.find("input[name='setInArea']").val();//套内面积
			var houseType=$_this.find("input[name='houseType']").val();//房屋类型
			var direction=$_this.find("select[name='direction']").val();//朝向
			var roomUse=$_this.find("select[name='roomUse']").val();//用途
			var roomStatus=$_this.find("select[name='roomStatus']").val();//状态
			var fkBuildingUnit = parent.buildFloorId;//2017.12.04由单元id更改为楼层id
			
			if(roomNum==""||roomNum==null){
				layer.msg("请输入房间号");
				$_this.find("input[name='roomNum']").focus();
				return null;
			}else if (!testNum(buildingArea)||buildingArea<=0) {
				layer.msg("建筑面积请输入数值且数值要大于0㎡");
				$_this.find("input[name='buildingArea']").focus();
				return null;
			} else if (!testNum(setInArea)||setInArea<=0) {
				layer.msg("套内面积请输入数值且数值要大于0㎡");
				$_this.find("input[name='setInArea']").focus();
				return null;
			} else if(parseFloat(setInArea)>=parseFloat(buildingArea)){
				layer.msg("套内面积要小于建筑面积");
				$_this.find("input[name='setInArea']").focus();
				return null;
			} else if(roomStatus==""||roomStatus==null){
				layer.msg("房间状态不能为空");
				$_this.find("select[name='roomStatus']").focus();
				return null;
			}
			return {
				fkBuildingUnit:fkBuildingUnit,
				id:roomid,
				roomNum:roomNum,
				buildingArea:buildingArea,
				setInArea:setInArea,
				houseType:houseType,
				direction:direction,
				roomUse:roomUse,
				roomStatus:roomStatus
			};
		}
		//提交回调
		function success(data){
			if (data.success) {
				layer.msg(data.msg,{
		    		//anim: 5,
		    		time: 2000
		    	},function(){
					 window.location.reload(true);
		    		parent.updateRoomNotClick();//修改完成更新一下房间列表
		    	});
			} else {
				layer.msg(data.msg);
			}
			
		}
		
	</script>
</body>
</html>